<template>
  <div class="container">
    <h1>系统信息获取</h1>
    
    <div class="actions">
      <button @click="getSystemInfo" :disabled="loading">
        {{ loading ? '获取中...' : '刷新系统信息' }}
      </button>
    </div>
    
    <!-- 错误提示 -->
    <div v-if="error" class="error-message">{{ error }}</div>
    
    <!-- 加载中提示 -->
    <div v-else-if="loading" class="loading">加载系统信息中...</div>
    
    <!-- 系统信息展示 -->
    <div v-else-if="systemInfo" class="system-info">
      <div class="info-card">
        <h2>系统基本信息</h2>
        <p><span class="label">制造商:</span> {{ systemInfo.system.manufacturer }}</p>
        <p><span class="label">型号:</span> {{ systemInfo.system.model }}</p>
        <p><span class="label">版本:</span> {{ systemInfo.system.version }}</p>
        <p><span class="label">序列号:</span> {{ systemInfo.system.serial }}</p>
        <p><span class="label">SKU:</span> {{ systemInfo.system.sku }}</p>
        <p><span class="label">虚拟化:</span> {{ systemInfo.system.virtual ? '是' : '否' }}</p>
      </div>

      <div class="info-card">
        <h2>CPU信息</h2>
        <p><span class="label">型号:</span> {{ systemInfo.cpu.brand }}</p>
        <p><span class="label">核心数:</span> {{ systemInfo.cpu.cores }}</p>
        <p><span class="label">物理核心:</span> {{ systemInfo.cpu.physicalCores }}</p>
        <p><span class="label">速度:</span> {{ systemInfo.cpu.speed }} GHz</p>
      </div>

      <div class="info-card">
        <h2>内存信息</h2>
        <p><span class="label">总内存:</span> {{ formatMemory(systemInfo.memory.total) }}</p>
        <p><span class="label">可用内存:</span> {{ formatMemory(systemInfo.memory.free) }}</p>
        <p><span class="label">已用内存:</span> {{ formatMemory(systemInfo.memory.used) }}</p>
        <p><span class="label">使用率:</span> {{ (systemInfo.memory.used / systemInfo.memory.total * 100).toFixed(2) }}%</p>
      </div>

      <div class="info-card">
        <h2>磁盘信息</h2>
        <div v-for="disk in systemInfo.diskLayout" :key="disk.device">
          <p><span class="label">设备:</span> {{ disk.device }}</p>
          <p><span class="label">类型:</span> {{ disk.type }}</p>
          <p><span class="label">容量:</span> {{ formatMemory(disk.size) }}</p>
          <p><span class="label">型号:</span> {{ disk.model }}</p>
          <hr v-if="!$last">
        </div>
      </div>

      <!-- 网络信息展示区 -->
      <div v-for="item in systemInfo.networkInterfaces" :key="item.iface" class="info-card network-card" :class="{ 'default-interface': item.default }">
        <div class="network-header">
          <h2>网络接口</h2>
          <span class="interface-status" :class="item.operstate">{{ item.operstate }}</span>
        </div>
        
        <div class="info-grid">
          <div class="info-item">
            <span class="label">接口名称:</span>
            <span class="value">{{ item.iface }}</span>
          </div>
          
          <div class="info-item">
            <span class="label">描述:</span>
            <span class="value">{{ item.ifaceName }}</span>
          </div>
          
          <div class="info-item">
            <span class="label">类型:</span>
            <span class="value">
              <span class="interface-type">
                <i class="type-icon" :class="item.type === 'wired' ? 'wired-icon' : 'wireless-icon'"></i>
                {{ item.type === 'wired' ? '有线' : item.type === 'wireless' ? '无线' : item.type }}
              </span>
              <span v-if="item.virtual" class="virtual-tag">虚拟</span>
            </span>
          </div>
          
          <div class="info-item">
            <span class="label">IPv4地址:</span>
            <span class="value">{{ item.ip4 || '未设置' }}</span>
          </div>
          
          <div class="info-item">
            <span class="label">子网掩码:</span>
            <span class="value">{{ item.ip4subnet }}</span>
          </div>
          
          <div class="info-item">
            <span class="label">IPv6地址:</span>
            <span class="value">
              <div class="ip6-address">{{ item.ip6 || '未设置' }}</div>
            </span>
          </div>
          
          <div class="info-item">
            <span class="label">MAC地址:</span>
            <span class="value mac-address">{{ item.mac }}</span>
          </div>
          
          <div class="info-item">
            <span class="label">连接速度:</span>
            <span class="value">{{ item.speed ? item.speed + ' Mbps' : '未知' }}</span>
          </div>
        </div>
        
        <div v-if="item.default" class="default-badge">默认接口</div>
      </div>

      <div class="info-card" v-if="systemInfo.battery">
        <h2>电池信息</h2>
        <p><span class="label">百分比:</span> {{ systemInfo.battery.percent }}%</p>
        <p><span class="label">状态:</span> {{ systemInfo.battery.isCharging ? '充电中' : '未充电' }}</p>
        <p><span class="label">AC连接:</span> {{ systemInfo.battery.acConnected ? '已连接' : '未连接' }}</p>
        <p><span class="label">设计容量:</span> {{ systemInfo.battery.designedCapacity }} {{ systemInfo.battery.capacityUnit }}</p>
        <p><span class="label">最大容量:</span> {{ systemInfo.battery.maxCapacity }} {{ systemInfo.battery.capacityUnit }}</p>
        <p><span class="label">当前容量:</span> {{ systemInfo.battery.currentCapacity }} {{ systemInfo.battery.capacityUnit }}</p>
        <p><span class="label">电池型号:</span> {{ systemInfo.battery.model }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

// 定义系统信息数据
const systemInfo = ref(null)
const loading = ref(false)
const error = ref('')

// 格式化内存大小（字节转GB/MB）
const formatMemory = (bytes) => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 格式化运行时间（秒转天/小时/分钟）
const formatUptime = (seconds) => {
  const days = Math.floor(seconds / 86400)
  seconds %= 86400
  const hours = Math.floor(seconds / 3600)
  seconds %= 3600
  const minutes = Math.floor(seconds / 60)
  seconds = Math.floor(seconds)

  let result = ''
  if (days > 0) result += `${days}天 `
  if (hours > 0) result += `${hours}小时 `
  if (minutes > 0) result += `${minutes}分钟 `
  result += `${seconds}秒`
  return result
}

// 格式化时间（秒转小时/分钟）
const formatTime = (seconds) => {
  const hours = Math.floor(seconds / 3600)
  seconds %= 3600
  const minutes = Math.floor(seconds / 60)
  seconds = Math.floor(seconds)

  return `${hours}小时${minutes}分钟${seconds}秒`
}

// 获取系统信息的函数
const getSystemInfo = async () => {
  loading.value = true
  error.value = ''
  try {
    console.log('发起API请求: /api/getSystemInfo')
    const response = await axios.get('/api/getSystemInfo')
    console.log('API响应状态:', response.status)
    console.log('API响应数据:', response.data)
    if (response.data.code === 200) {
      systemInfo.value = response.data.data
    } else {
      error.value = `请求失败: ${response.data.message} (状态码: ${response.data.code})`
    }
  } catch (err) {
    console.error('获取系统信息错误:', err)
    if (err.response) {
      // 服务器返回了错误响应
      error.value = `请求失败: ${err.message} (状态码: ${err.response.status})\nURL: ${err.config.url}\n响应数据: ${JSON.stringify(err.response.data)}`
    } else if (err.request) {
      // 请求已发送但未收到响应
      error.value = `请求失败: 服务器无响应\nURL: ${err.config.url}\n可能的原因: 服务器未运行或网络问题`
    } else {
      // 请求配置出错
      error.value = `请求失败: ${err.message}`
    }
  } finally {
    loading.value = false
  }
}

// 页面加载时获取系统信息
onMounted(() => {
  getSystemInfo()
})
</script>

<style scoped>
.container {
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

h2 {
  color: #42b883;
  margin-top: 0;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.actions {
  text-align: center;
  margin-bottom: 20px;
}

button {
  background-color: #42b883;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #3aa876;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.loading {
  text-align: center;
  padding: 20px;
  font-style: italic;
  color: #666;
}

.error-message {
  background-color: #ffeeee;
  color: #cc0000;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  text-align: center;
}

.system-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 5fr));
  gap: 20px;
  margin-top: 20px;
}

.info-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.label {
  font-weight: bold;
  color: #555;
  margin-right: 5px;
}
/* 网络信息卡片样式 */
.network-card {
  position: relative;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 100%);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.network-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.network-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.interface-status {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.interface-status.up {
  background-color: #d4edda;
  color: #155724;
}

.interface-status.down {
  background-color: #f8d7da;
  color: #721c24;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.info-item {
  display: flex;
  flex-direction: column;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item .label {
  font-weight: bold;
  color: #555;
  font-size: 12px;
  margin-bottom: 2px;
}

.info-item .value {
  color: #333;
  font-size: 14px;
  word-break: break-all;
}

.interface-type {
  display: flex;
  align-items: center;
  gap: 5px;
}

.type-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
}

.type-icon.wired-icon::before {
  content: '🖧';
}

.type-icon.wireless-icon::before {
  content: '📶';
}

.virtual-tag {
  background-color: #e2f0fb;
  color: #0277bd;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  margin-left: 5px;
}

.mac-address {
  font-family: 'Courier New', monospace;
  background-color: #f5f5f5;
  padding: 2px 5px;
  border-radius: 3px;
}

.ip6-address {
  font-family: 'Courier New', monospace;
  background-color: #f5f5f5;
  padding: 2px 5px;
  border-radius: 3px;
  word-break: break-all;
}

.default-interface {
  border: 2px solid #42b883;
}

.default-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #42b883;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
}

/* 响应式优化 */
@media (min-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr 1fr;
  }
}
</style>